<template>
  <div>
    <!-- 首页面 -->

    <div class="slideshow">
      <!-- 轮播图 -->
      <Slideshow />
      <!-- 二级导航 -->
      <div class="nav_two">
        <NavTwo></NavTwo>
      </div>
    </div>
    <div class="list_card">
      <!-- 砍价列表 -->
      <p class="list_card_title" @click="toGoodsDetails">
        <span>全民砍价</span>
        <span>
          <van-icon name="arrow" />
        </span>
      </p>
      <ListCard :goods="list"></ListCard>
    </div>
    <div>
      <!-- 精选专题 -->
      <p class="list_card_title">
        <span>精选专题</span>
         <span>
          <van-icon name="arrow" />
        </span>
      </p>
      <Slide :goods="listSlide"></Slide>
    </div>
    <div class="list_card">
      <!-- 人气推荐列表 -->
      <p class="list_card_title" @click="toGoodsDetails">
        <span>人气推荐</span>
         <span>
          <van-icon name="arrow" />
        </span>
      </p>
      <GoodsCard :goods="shopList"></GoodsCard>
    </div>
  </div>
</template>

<script>
//轮播
import Slideshow from "../components/home/Slideshow";
//二级导航
import NavTwo from "../components/home/NavTwo";
//砍价商品列表
import ListCard from "../components/home/ListCard";
//推荐滑动
import Slide from "../components/home/Slide";
//推荐商品列表
import GoodsCard from "../components/home/GoodsCard";
export default {
  components: {
    Slideshow,
    NavTwo,
    ListCard,
    Slide,
    GoodsCard
  },
  data() {
    return {};
  },
  computed: {
    // 砍价列表
    list: function() {
      return this.$store.state.listModule.listItems;
    },
    //专题
    listSlide: function() {
      return this.$store.state.listSlideModule.listSlideItems;
    },
    //推荐列表
    shopList: function() {
      return this.$store.state.shopListModule.listItems;
    }
  },
  //请求商品列表
  mounted() {
    //砍价列表
    this.$store.dispatch("getList");

    //专题列表
    this.$store.dispatch("getListSlide");

    //推荐列表
    this.$store.dispatch("getGoodsList");
  },
  methods: {
    //砍价列表
    toGoodsDetails() {
      this.$router.push({
        path: "/goodslist"
      });
    }
  }
};
</script>

<style scoped>
.slideshow {
  width: 100%;
}
.nav_two {
  width: 100%;
  border-radius: 60px 60px 0px 0px;
  position: absolute;
  top: 3rem;
}
.list_card {
  /* border: 1px solid #000; */
  width: 100%;
  margin-top: 0.2rem;
}
.list_card_title {
  width: 100%;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  margin: 0.2rem;
}
.list_card_title span {
  font-size: 0.35rem;
    line-height: 0.4rem;
}

</style>